<template>
  <base-load-page :loadState="false" class="base-load-page">
    <template #head>
      <div style="padding-bottom: 15px" class="head-box">
        <div class="left-box"></div>
        <div class="right-box">
          <el-button type="success" :icon="IconPlus" @click="handleAddTemplate()">新增回传模版</el-button>
        </div>
      </div>
    </template>
    <el-table ref="elTableRef" v-loading="baseData.loading" border height="100%" :data="tableData" showOverflowTooltip stripe style="width: 100%">
      <template #empty>
        <base-empty :description="description" :pageLoadButton="[{ text: '重新加载', callBack: () => getAxiosData() }]"></base-empty>
      </template>
      <el-table-column
        fixed
        type="index"
        :index="(index: number) => (filterData.current - 1) * filterData.size + index + 1"
        label="编号"
        sortable
        width="60"
        align="center"
        headerAlign="center"
      ></el-table-column>
      <el-table-column fixed label="创建者" prop="backTemplateName" minWidth="200">
        <template #default="{ row }">
          <span>{{ `${row.realname}(${row.createBy})` }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed label="回传模版名称" prop="backTemplateName" minWidth="200"></el-table-column>
      <el-table-column fixed label="支付模版名称" prop="templateName" minWidth="180"></el-table-column>
      <el-table-column fixed label="回传类型" prop="reportType" minWidth="180">
        <template #default="{ row }">
          <span v-if="row.reportType === 11">回传用户所有充值</span>
          <span v-else-if="row.reportType === 12">回传用户当天自然日的所有充值</span>
          <span v-else-if="row.reportType === 13">回传用户24小时内的所有充值</span>
          <span v-else-if="row.reportType === 21">回传用户所有首充</span>
          <span v-else-if="row.reportType === 22">回传用户当天自然日的所有首充</span>
          <span v-else-if="row.reportType === 23">回传用户24小时内的所有首充</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" headerAlign="center" align="center" prop="action" width="180">
        <template #default="{ row }">
          <el-button class="butt" link :icon="IconEdit" type="primary" @click="handleEditTemplate(row)">编辑</el-button>
          <el-button class="butt" link :icon="IconDelete" type="danger" @click="handleDel(row.productBackTemplateId!)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #foot>
      <div class="pagination-box">
        <el-pagination
          v-model:currentPage="filterData.current"
          v-model:pageSize="filterData.size"
          :pageSizes="[20, 30, 40, 50]"
          :disabled="baseData.loading"
          :pagerCount="13"
          layout="total, prev, pager, next, sizes, jumper"
          :total="baseData.total"
          @change="getAxiosData(true)"
        ></el-pagination>
      </div>
    </template>
    <edit-template ref="editTemplateRef"></edit-template>
  </base-load-page>
</template>

<script setup lang="ts">
  import IconPlus from '~icons/ep/plus';
  import IconDelete from '~icons/ep/delete';
  import {
    type GetBackTemplateListRequest,
    type PdtProductBackTemplateAggregation,
    delBackTemplateAxios,
    getBackTemplateListAxios,
  } from '@/api/marketing-management';
  import IconEdit from '~icons/ep/edit';
  import EditTemplate from './components/edit-template.vue';

  const editTemplateRef = ref<InstanceType<typeof EditTemplate>>();

  const elTableRef: $RefComp<'ElTable'> = ref(null);
  const baseData = shallowReactive({
    /** 加载状态 */
    loading: true,
    /** 总数量 */
    total: 0,
  });

  const filterData: Ref<GetBackTemplateListRequest> = ref<GetBackTemplateListRequest>({
    current: 1,
    size: 40,
  });

  const tableData: Ref<PdtProductBackTemplateAggregation[]> = ref([]);
  const description = ref('');
  onMounted(() => {
    getAxiosData();
  });

  onBeforeRouteLeave(() => {
    editTemplateRef.value?.hide();
  });

  /**
   * 设置表格数据
   */
  async function getAxiosData(showLoading = true) {
    try {
      await nextTick();
      baseData.loading = Boolean(showLoading);
      const res = await getBackTemplateListAxios(filterData.value);
      tableData.value = res.data.records;
      description.value = '暂无数据';
      filterData.value.current = res.data.current;
      filterData.value.size = res.data.size;
      baseData.total = res.data.total;
      baseData.loading = false;
    } catch (error) {
      baseData.loading = false;
      tableData.value = [];
      description.value = error.msg || '加载失败，-BD001';
    }
  }

  /** 新增推广链接 */
  function handleAddTemplate() {
    editTemplateRef.value?.show({
      action: 'add',
      callBack() {
        getAxiosData();
      },
    });
  }

  /** 编辑回传模板 */
  function handleEditTemplate(row: PdtProductBackTemplateAggregation) {
    editTemplateRef.value?.show({
      action: 'edit',
      template: row,
      callBack() {
        getAxiosData();
      },
    });
  }

  /**
   * 删除
   */
  function handleDel(productTemplateId: number) {
    ElMessageBox.confirm('删除后不可恢复，您确定删除吗？', '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
      beforeClose: async (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true;
          try {
            await delBackTemplateAxios(productTemplateId);
            await getAxiosData();
            instance.confirmButtonLoading = false;
            done();
            ElToast.success('删除成功');
          } catch (error) {
            instance.confirmButtonLoading = false;
            ElToast.error(error.msg || '删除失败，-BD004');
          }
        } else {
          done();
        }
      },
    });
  }
</script>

<style lang="scss" scoped>
  .pagination-box {
    @include flex(row, nowrap, center, center, center);
    padding-top: 15px;
  }

  .head-box {
    @include flex(row, nowrap, flex-start, center, center);

    .left-box {
      display: grid;
      flex: 1;
      grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
      grid-gap: 15px;
      margin-right: 15px;
    }
  }
</style>
